<template>
  <div ref="page" class="user-page">
    <div class="page-background">
      <div class="back"></div>
    </div>
    <div class="page-header">
      <span>我的</span>
    </div>
    <div class="user-info" @click="toRouter('/usersetting')">
      <div class="head-img">
        <div class>
          <var-avatar border-color="white" bordered="true" :src="imgUrl" size="large" />
        </div>
        <div class="name-box">
          <span class="name">{{ userName || "请先登录" }}</span>
          <span class="leve">普通会员</span>
        </div>
      </div>

      <div class="action">
        <var-icon color="white" size="40" name="chevron-right" />
      </div>
    </div>

    <!-- 功能列表 -->
    <div class="action-list">
      <div class="action-item">
        <div class="item-container">
          <span class="icon"></span>
          <span class="text">成就</span>
          <span class="btn">
            <var-icon color name="chevron-right" />
          </span>
        </div>
      </div>
      <div class="action-item" @click="toRouter('/class')">
        <div class="item-container">
          <span class="icon"></span>
          <span class="text">打卡课程设置</span>
          <span class="btn">
            <var-icon color name="chevron-right" />
          </span>
        </div>
      </div>
      <div class="action-item" @click="toRouter('/librarylist')">
        <div class="item-container">
          <span class="icon"></span>
          <span class="text">打卡地址设置</span>
          <span class="btn">
            <var-icon color name="chevron-right" />
          </span>
        </div>
      </div>
      <div class="action-item">
        <div class="item-container">
          <span class="icon"></span>
          <span class="text">用户协议和隐私说明</span>
          <span class="btn">
            <var-icon color name="chevron-right" />
          </span>
        </div>
      </div>
      <div class="action-item">
        <div class="item-container">
          <span class="icon"></span>
          <span class="text">关于我们/联系开发者</span>
          <span class="btn">
            <var-icon color name="chevron-right" />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { routes, router } from "@/router";
import { useStore } from "vuex";
import { computed, onMounted, ref } from "vue";
import { getSystemBarHeight, setPageTopBarHeight } from "@/util/uni-5+app.utils";
export default {
  name: "UserView",

  setup() {
    const page = ref()
    const store = useStore();
    const toRouter = path => {
      // router.push(path)
      router.replace({
        path: path
        // query,
      });
    };
    onMounted(() => {
      setPageTopBarHeight({
        dom: page.value,
        height: getSystemBarHeight(),
        textColor:"light"
      })
    })
    return {
      page,
      userName: computed(() => store.state.userInfo.userName),
      imgUrl: computed(() => store.state.userInfo.imgUrl),
      store,
      toRouter
    };

  }
};
</script>
<style lang="scss" scoped>
.user-page {
  min-height: 100%;
  width: 100%;
  padding: 20px;
  // padding-top: 40px;
  display: flex;
  flex-direction: column;

  .page-background {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .back {
      height: 200px;
      width: 100%;
      border-radius: 0 0 25px 25px;
      background-color: #6163ea;
    }
  }

  .page-header {
    height: 50px;
    width: 100%;
    text-align: center;

    span {
      color: white;
      font-weight: 600;
    }
  }

  .user-info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;

    .head-img {
      display: flex;

      .name-box {
        display: flex;
        flex-direction: column;
        padding-left: 10px;

        .name {
          color: white;
          font-size: 16px;
          padding: 10px 0;
        }

        .leve {
          font-size: 12px;
          display: inline-block;
          padding: 5px;
          background-color: #ffa607;
          color: white;
        }
      }
    }

    .action {}
  }

  .action-list {
    width: 100%;

    .action-item {
      padding: 10px;
      width: 100%;
      background-color: white;
      border-radius: 10px;
      margin: 5px 0;

      .item-container {
        width: 100%;
        display: flex;
        align-items: center;

        span {
          display: inline-block;
        }

        .icon {
          // width: 20px;
        }

        .text {
          flex: 1;
          font-size: 14px;
          color: rgb(72, 72, 72);
        }

        .btn {
          width: 20px;
        }
      }
    }
  }
}
</style>